<template>
  <div>
    <van-skeleton title :row="10" v-if="!goodsObj.title" style="margin-top:33px" />
    <div v-else>
      <van-nav-bar title="短信诊断详情" left-arrow @click-left="onClickLeft" fixed />

      <InfoPanelGroup title="短信服务" style="margin-top:50px">
        <div class="SmsServer">
          <div class="header">
            <span>物联网卡专用数据通讯服务产品</span>
            <span>不提供短消息终按业务</span>
          </div>
          <ul>
            <li>
              <span>核心网状态</span>
              <span class="left">xxx</span>
            </li>
            <li>
              <span>封顶关停</span>
              <span class="left">订购封停解除姿费</span>
            </li>
          </ul>
        </div>

        <div class="SmsServer">
          <div class="header">
            <span>xxx服务产品</span>
            <span>不提供短消息始发业务</span>
          </div>
          <ul>
            <li>
              <span>核心网状态</span>
              <span class="left">xxx</span>
            </li>
            <li>
              <span>封顶关停</span>
              <van-button plain round size="small" type="info" @click="starHandle">服务启动</van-button>
            </li>
          </ul>
        </div>
      </InfoPanelGroup>

      <InfoPanelGroup :title="goodsObj.title">
        <InfoPanelItem v-for="(obj, index) in goodsObj.list" :key="index" :label="obj.label" :state="obj.state" :identify="obj.identify" :effTime="obj.effTime" :expTime="obj.expTime" :stateBottom="obj.stateBottom">
        </InfoPanelItem>
      </InfoPanelGroup>

      <InfoPanelGroup title="短信端口号">
        <div class="prot">
          <div class="header">
            <span>已订购端口号</span>
            <van-button plain round size="small" type="info" @click="cloneHandle">一键复制</van-button>
          </div>
          <ul>
            <li>
              <van-icon name="description" />
              <span>12345678901</span>
            </li>
            <li>
              <van-icon name="description" />
              <span>12345678902</span>
            </li>
            <li>
              <van-icon name="description" />
              <span>12345678903</span>
            </li>
            <li>
              <van-icon name="description" />
              <span>12345678904</span>
            </li>
          </ul>
        </div>
      </InfoPanelGroup>
    </div>
  </div>

</template>

<script>
import axios from "axios";
export default {
  name: "SmsDetail",
  data() {
    return {
      goodsObj: {},
      groupObj: {},
    };
  },
  methods: {
    async getData() {
      const { data } = await axios.get(
        "https://mock.apifox.cn/m1/1421717-0-default/goods/service"
      );
      console.log(data);
      if (data.code !== 200) return console.log("请求数据失败");
      // 请求成功
      this.goodsObj = data.data.goods;
      this.groupObj = data.data.group;
    },
    starHandle() {
      this.$toast('启动成功')
    },
    cloneHandle() {
      this.$toast('复制成功')
    },
    onClickLeft() {
      this.$router.go(-1)
    }
  },
  created() {
    this.getData();
    // console.log(this);
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar {
  background-color: #319aff;
  .van-icon {
    color: #fff;
  }
  .van-nav-bar__title {
    color: #fff;
  }
}
.SmsServer {
  padding: 0 15px;
  font-size: 13px;
  border-bottom: 1px solid #ccc;
  .header {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    :first-child {
      color: black;
      font-weight: 600;
    }
    :last-child {
      color: #e89e4a;
      font-size: 10px;
    }
  }
  ul {
    margin-top: 10px;
    li {
      display: flex;
      justify-content: space-between;
      height: 40px;
      align-items: center;
      .left {
        width: 130px;
        margin-right: 30px;
      }
      .van-button {
        width: 130px;
        margin-right: 30px;
      }
    }
  }
}
.prot {
  padding: 0 15px;
  .header {
    display: flex;
    justify-content: space-between;
    height: 50px;
    align-items: center;
    color: #000;
    font-weight: 600;
    .van-button {
      width: 130px;
    }
  }
  ul {
    li {
      display: flex;
      height: 40px;
      align-items: center;
      font-size: 17px;
    }
  }
}
</style>